<template>
    <el-dialog v-model="props.visible" title="编辑客户信息" width="30%" @close="handleClose" destroy-on-close >
        <el-form ref="form" :model="formData" label-position="right" label-width="80px">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="客户名称" prop="customerName">
                        <el-input placeholder="请输入" disabled v-model="formData.customerName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人" prop="linkName">
                        <el-input placeholder="请输入" v-model="formData.linkName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="客户星级" prop="customerLevel">
                        <span class="level-one" v-if="props.editId.customerLevel == '1'">一级客户</span>
                        <span class="level-two" v-else-if="props.editId.customerLevel == '2'">二级客户</span>
                        <span class="level-three" v-else-if="props.editId.customerLevel == '3'">三级客户</span>
                        <span class="level-four" v-else-if="props.editId.customerLevel == '4'">四级客户</span>
                        <span class="level-five" v-else-if="props.editId.customerLevel == '5'">五级客户</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="linkMobile">
                        <el-input placeholder="请输入" v-model="formData.linkMobile"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="渠道来源" prop="customerSource">
                        <el-select v-model="formData.customerSource" :disabled="isDisabled">
                            <el-option v-for="item in props.sources" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系微信" prop="weChat">
                        <el-input placeholder="请输入" v-model="formData.weChat"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="地址识别">
                <el-input placeholder="请输入" v-model="addressIdentify">
                    <template #append>
                        <el-button type="primary" :icon="Search" @click="handleClickAnalysis"/>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="客户地址" prop="customerAddress">
                <el-cascader filterable clearable :options="pcaTextArr" v-model="selectedOptions"></el-cascader>
            </el-form-item>
            <el-form-item label="地址详情" prop="addressDetail">
                <el-input placeholder="请输入" v-model="formData.addressDetail"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" maxlength="128" show-word-limit v-model="formData.remark"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { pcaTextArr} from 'element-china-area-data';
import type { FormInstance } from 'element-plus';
import { getCustomerByIdApi,analysisAddressApi,editCustomerApi } from '@/api/sj/customer-crm/index';

const props = defineProps(['visible','editId','sources']);
const form = ref<FormInstance>();
const addressIdentify = ref<string>();
const data = reactive({
    formData:{
        id: undefined,
        customerName: undefined,
        linkName: undefined,
        customerLevel: 1,
        linkMobile: undefined,
        weChat: undefined,
        customerSource: undefined,
        province: undefined,
        city: undefined,
        county: undefined,
        addressDetail: undefined,
        remark: undefined,
        signFlag: 0,
        publicFlag: 0
    }
});
const { formData } = toRefs(data);
const isDisabled = ref(true);

const emits = defineEmits(['submit','close']);

const selectedOptions = ref<any[]>([]);

const getCustomer = async() => {
    const { data } = await getCustomerByIdApi(props.editId.id);
    formData.value = {...data};
    selectedOptions.value[0] = data.province;
    selectedOptions.value[1] = data.city;
    selectedOptions.value[2] = data.county;
};

const analysisAddress = async ()=>{
    const { data } = await analysisAddressApi({address:addressIdentify.value});
    selectedOptions.value[0] = data[0].province;
    selectedOptions.value[1] = data[0].city;
    selectedOptions.value[2] = data[0].county; 
};

const handleClickAnalysis = () => {
    analysisAddress();
};

watch(()=>props.editId, ()=>{
    getCustomer();
    if(!props.editId.customerSource){
        isDisabled.value = false;
    };
});

watch(selectedOptions,() => {
    formData.value.province = selectedOptions.value[0];
    formData.value.city = selectedOptions.value[1];
    formData.value.county = selectedOptions.value[2];
},{deep:true});

const handleSubmit = async () => {
    await editCustomerApi(formData.value).then((result)=>{
        if(result.code == 200){
            emits('submit',true);
            handleClose()
        }
    }).catch((error)=>{
        emits('submit',false);
    });
};

const handleClose = () => {
    form.value?.resetFields();
    addressIdentify.value = '';
    selectedOptions.value = [];
    emits('close');
};

// onMounted(()=>{
//     getCustomer();
// });

</script>

<style scoped>
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>